<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button class="setBtn">新增</button>
    <button class="getBtn">获取</button>
    <button class="editBtn">修改</button>
    <button class="delBtn">删除</button>
    <button class="keyBtn">遍历</button>
</body>
<script type="module">


    //  webStorage  网页存储  => H5新增网页存储方式,解决cookie的一部分问题
    // 1.提供一种在cookie之外存储会话数据的路径
    // 2.提供一种存储大量可以跨会话存在的数据的机制  (存5M,跨页面访问(默认存储在站点根目录))
    // 3.自带数据增删改查的方法

    // webStorage中存储的数据,不会主动随请求传递给服务器,严格限制在客户端

    // webStorage网页存储(统称) 提供了两种存储数据的方式: localStorage(本地存储)  sessionStorage(会话存储)
    // localStorage(本地存储)   -> 长时间存储 (只要不删除,一直存在)
    // sessionStorage(会话存储)  -> 浏览器窗口会话结束(浏览器窗口关闭)


    //  localStorage(本地存储)  sessionStorage(会话存储) 属性和方法

    // 如何查看localStorage(本地存储)  sessionStorage(会话存储)  => 全局对象(键值只能是字符串类型)

    // 属性:
    // length   保存数据的数量

    // 方法
    // setItem(key, value) —— 保存数据，以键值对的方式存储信息 (没有就新增 有就修改)
    // getItem(key) —— 获取数据，将键值传入，即可获取到对应的value值
    // removeItem(key) —— 删除单个数据，根据键值移除对应的信息
    // clear() —— 删除所有的数据
    // key(index) —— 获取某个索引的key


    // console.log(localStorage);


    var setBtn = document.getElementsByClassName("setBtn")[0];
    var getBtn = document.getElementsByClassName("getBtn")[0];
    var editBtn = document.getElementsByClassName("editBtn")[0];
    var delBtn = document.getElementsByClassName("delBtn")[0];
    var keyBtn = document.getElementsByClassName("keyBtn")[0];


    setBtn.onclick = function () {
        localStorage.setItem("user", "a123123");
        localStorage.setItem("pwd", "123123");
        localStorage.setItem("phone", "17386141517");
        localStorage.setItem("email", "123123@qq.com");

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 }

        localStorage.setItem("arr", arr);
        localStorage.setItem("obj", obj);

        console.log(localStorage);

    }


    setBtn.onclick = function () {
        localStorage.setItem("user", "a123123");
        localStorage.setItem("pwd", "123123");
        localStorage.setItem("phone", "17386141517");
        localStorage.setItem("email", "123123@qq.com");

        var arr = [1, 2, 3];
        var obj = { a: 1, b: 2 }

        localStorage.setItem("arr", JSON.stringify(arr));
        localStorage.setItem("obj", JSON.stringify(obj));

        console.log(localStorage);

    }

    getBtn.onclick = function () {
        console.log(localStorage.getItem("user"));
        console.log(localStorage.getItem("pwd"));
        console.log(localStorage.getItem("phone"));
        console.log(localStorage.getItem("email"));

        var enArr = localStorage.getItem("arr")
        var enObj = localStorage.getItem("obj")

        console.log(JSON.parse(enArr));
        console.log(JSON.parse(enObj));


    }

    editBtn.onclick = function () {
        localStorage.setItem("user", "b123123");
        localStorage.setItem("pwd", "321321");
        console.log(localStorage);
    }


    delBtn.onclick = function () {
        // localStorage.removeItem("user");
        // localStorage.removeItem("pwd");
        // localStorage.removeItem("phone");
        // localStorage.removeItem("email");
        // localStorage.removeItem("arr");
        // localStorage.removeItem("obj");


        localStorage.clear();

    }


    keyBtn.onclick = function () {
        // console.log(localStorage);
        // localStorage 给每个键名定了下标 -> 对应下标返回键名
        for (var i = 0; i < localStorage.length; i++) {  // 有几条数据
            var key = localStorage.key(i);
            console.log(key, localStorage.getItem(key));
        }
    }






</script>

</html>